<div class="x-container">

  <nav class="header-nav">
    <LinkTo @route="authenticated.dashboard" class="header-nav-logo">
      <HermesLogo />
    </LinkTo>

    <div class="primary-links">
      <LinkTo
        @route="authenticated.all"
        @current-when="authenticated.all"
        @query={{this.defaultBrowseScreenQueryParams}}
      >
        All Docs
      </LinkTo>
      <LinkTo
        @route="authenticated.my"
        @current-when="authenticated.my"
        @query={{this.defaultBrowseScreenQueryParams}}
      >
        My Docs
      </LinkTo>
      <LinkTo
        @route="authenticated.drafts"
        @current-when="authenticated.drafts"
        @query={{this.defaultBrowseScreenQueryParams}}
      >
        My Drafts
      </LinkTo>
    </div>

    <Header::Search class="search-bar" />

    <div class="user-buttons">
      <Hds::Button
        @route="authenticated.new"
        @isIconOnly={{true}}
        @text="Create draft"
        @icon="file-plus"
        class="create-draft-button"
      />
      <div class="relative">
        {{! Workaround until `referrerPolicy` is supported in dd.ToggleIcon }}
        <img
          src={{this.profile.picture}}
          class="user-avatar"
          role="presentation"
          referrerpolicy="no-referrer"
        />
        <Hds::Dropdown as |dd|>
          <dd.ToggleIcon @text="User menu" @icon="user" />
          <dd.Title @text={{this.profile.name}} class="text-body-200" />
          <dd.Description @text={{this.profile.email}} class="text-body-200" />
          <dd.Separator class="mt-2" />
          <dd.Interactive
            @route="authenticated.settings"
            @text="Email notifications"
          />

          <dd.Interactive
            {{on "click" this.invalidateSession}}
            @text="Sign Out"
          />
        </Hds::Dropdown>
      </div>
    </div>
  </nav>
</div>
